/* 首页-本校通知的界面样式 */

body {
    background-color: RGB(221, 221, 221);
}

#top p {
    text-align: center;

}

/* 显示当前院校栏 */
#location {
    width: 100%;
    height: 6vh;
    background-color: white;
    display: flex;
    align-items: center;
    /*垂直居中*/
    justify-content: left;
    /*水平靠左*/
    padding-left: 3vw;
    font-size: 2.4vb;
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
    font-weight: bold;
}

#location a {
    color: black;
    text-decoration: none;
}

/* 学校官网图 */
#banner {
    width: 100%;
    height: 23.5vh;
    background-color: white;
    margin-bottom: 0.5vh;
    overflow: hidden;
    /* 防止图片溢出容器 */
}

#banner img {
    width: auto;
    height: 100%;
    object-fit: contain;
    /* 保持宽高比，可能会裁剪图片的某些部分 */
}

#temp {
    /* 把三个浮动的元素套在一个div里 */
    width: 100%;
    height: 3vh;
    background-color: RGB(221, 221, 221);
}

/* 切换栏   明明没有设置内间距和外间距，不知道为什么贴合不到上一个div盒子*/
.option {
    float: left;
    width: 12vh;
    background-color: white;
    margin-left: 1vb;
    margin-right: 1vb;
    margin-bottom: 1vb;
    font-size: 2vb;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: RGB(16, 85, 159);
}

#roll {
    width: 100%;
    height: 60vh;
    background-color: RGB(221, 221, 221);
}

#roll .link {
    color: black;
    text-decoration: none;
}

.content {
    width: 100%;
    height: 18vh;
    background-color: white;
    float: left;
    margin-bottom: 0.2vh;
    position: relative;
}

.content .title {
    font-size: 1.8vb;
    margin-bottom: 2vh;
    margin-top: 1vh;
    margin-left: 1vw;
    font-size: 2.2vb;
    width: 100%;
}

.content .time {
    color: grey;
    margin-left: 1vw;
    font-size: 1.8vb;
    width: 100%;
    position: absolute;
    bottom: 0.5vh;
}

.content .text {
    color: grey;
    margin-bottom: 1.5vh;
    margin-right: 1vw;
    margin-left: 1vw;
    font-size: 2vb;
    width: 100%;
}